<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品列表页</title>

</head>
<body>
	<%@ include file="header.jsp"%>


<div class="panel panel-default" style="margin: 0 auto;width: 95%;">
	<div class="panel-heading">
	    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;商品列表</h3>
	</div>
	<div class="panel-body">
	   	   <!--列表开始-->
	    <div class="row" style="margin: 0 auto;">
			<%-- 保存在reqeust作用域的数据 --%>
	    	<c:forEach items="${rr.data.list}" var="g" varStatus="i">
		    	<div class="col-sm-3">
				    <div class="thumbnail">
				      <img src="${pageContext.request.contextPath}/${g.pimage}" width="180" height="180"  alt="小米6" />
				      <div class="caption">
				        <h4>商品名称<a href="${pageContext.request.contextPath}/pro?method=getProById&pid=${g.pid}">${g.pname}</a></h4>
				        <p>热销指数
				        	<c:forEach begin="1" end="${g.pstate}">
				        		<img src="image/star_red.gif" alt="star"/>
				        	</c:forEach>
				        </p>
				         <p>上架日期:${g.ptime}</p>
			             <p style="color:orange">价格:${g.pprice}</p>
				      </div>
				    </div>
				  </div>
	    	</c:forEach>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<%-- 相当于 设置了一个变量 var tid = ${rr.data.list[0].tid} --%>
				<%-- 取值直接使用 ${tid} --%>
				<c:set var="tid" value="${rr.data.list[0].tid}"/>
				<%-- 分页工具条 --%>
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li>
							<%-- tid 上面设置的变量 --%>
							<a href="/pro?method=getProByTid&tid=${tid}&page=1" aria-label="Previous">
								<span aria-hidden="true">首页</span>
							</a>
						</li>
						<li>
							<a href="/pro?method=getProByTid&tid=${tid}&page=${rr.data.page-1}" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<c:forEach begin="1" end="${rr.data.totalPage}" varStatus="i">
<%--							${rr.data.page==i.count?"class='active'":""}--%>
<%--							<c:if test="${rr.data.page==i.count}">class='active'</c:if>--%>
							<%--
							rr.data.page 当前页码 ,i.count 循环中的计数 1开始(第一页第二页第三页的显示)
							如果当前页码和现在循环到的页数是一样,就代表当前页码就是这一页的数值
							设置样色的类样式,如果不是就写出空字符串
							--%>
							<li ${rr.data.page==i.count?"class='active'":""}>
								<a href="/pro?method=getProByTid&tid=${tid}&page=${i.count}">${i.count}</a>
							</li>
						</c:forEach>
						<li>
							<a href="/pro?method=getProByTid&tid=${tid}&page=${rr.data.page+1}" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
						<li>
							<a href="/pro?method=getProByTid&tid=${tid}&page=${rr.data.totalPage}" aria-label="Next">
								<span aria-hidden="true">尾页</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
   	</div>
</div>
<%--	${rr}--%>
      <!-- 底部 -->
   <%@ include file="footer.jsp"%>
</body>
</html>
